<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="ISO-8859-1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>SpreadShout - Admin</title>

        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/back.css">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    </head>
    <body>

        <!-- NAVIGATION -->
        <aside>
            <nav class="wrapper">
                <a class="logo" href="#">
                    <img src="img/logo-txt-wh.png" alt="Spread Shout">
                </a>
                <div id="toggle-menu" class="open-sidebar right"><i class="fa fa-bars"></i></div>
                <div class="off-canvas">
                <div class="views">
                    <div class="entity dropdown left">
                        <a class="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
                            <i class="fa fa-globe"></i><span>Entities</span><i class="fa fa-caret-down"></i>
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                            <li><a href="">Greenpeace</a></li>
                            <li><a href="">Donde Reciclo</a></li>
                            <li><a href="" class="dd-new-entity">Create new entity</a></li>
                        </ul>
                    </div>

                    <!-- <a href="#"><i class="fa fa-users"></i>Entities</a> -->
                    <a href="#"><i class="fa fa-comment"></i>Supports</a>
                    <a href="#" class="visible-off-canvas"><i class="fa fa-user"></i>Edit Profile</a>
                    <a href="#" class="visible-off-canvas"><i class="fa fa-sign-out"></i>Sign Out</a>
                </div>
                <div class="settings dropdown right">
                    <span class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                        <!-- <div class="current hidden-xs">
                            <i class="fa fa-user"></i><span>Juan Perez</span><i class="fa fa-caret-down"></i>
                        </div> -->
                        <div class="hidden-off-canvas">
                            <img src="img/user.jpg" alt="user-profile-pic"/></img><!--
                            --><!-- <i class="fa fa-caret-down"></i> -->
                        </div>
                    </span>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="#">Edit profile</a></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </div>
                <div class="footer-links">
                    <ul>
                        <li><a  href="#">FAQ</a></li>
                        <li><a  href="#">Help</a></li>
                    </ul>
                    
                </div>
                </div>
            </nav>
        </aside>
        <!-- NAVIGATION -->

        <!-- WHITE BLOCK -->
        <div class="main-content">

            <!-- ENTITY -->
            <header>
                <div class="wrapper">
                <div class="user">
                        
                        <a href="#" class="current">
                            <img src="img/face.png" alt=""/>
                            <div class="active-user">
                                <span class="nav-tag">Working as</span>
                                <span>Greenpeace</span><i class="fa fa-link"></i>
                            </div>
                        </a>
                    </div>
                
                
                <ul class="entity-nav">
                    <li><a href="#" class="red-bg red-button"><i class="fa fa-bullhorn"></i><span>Shout</span></a></li>
                    <li><a href="#"><i class="fa fa-bullhorn"></i>Shouts</a></li>
                    <li><a href="#"><i class="fa fa-user"></i>Spreaders</a></li>
                        <li><a href="#"><i class="fa fa-group"></i>Groups</a></li>
                    <li><a href="#"><i class="fa fa-bar-chart-o"></i>Statistics</a></li>
                    <li><a href="#"><i class="fa fa-pencil-square-o"></i>Customize</a></li>
                </ul>
                
                <div class="mobile-entity-nav">
                
                <div class="settings right dropdown right">
                    <span class="dLabel" role="button" data-toggle="dropdown" data-target="#">
                        <!-- <div class="current hidden-xs">
                            <i class="fa fa-user"></i><span>Juan Perez</span><i class="fa fa-caret-down"></i>
                        </div> -->
                        <div class="current">
                            <i class="fa fa-caret-down"></i>
                            <span>More</span>
                        </div>
                    </span>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a href="#"><i class="fa fa-bullhorn"></i>Shouts</a></li>
                        <li><a href="#"><i class="fa fa-user"></i>Spreaders</a></li>
                        <li><a href="#"><i class="fa fa-group"></i>Groups</a></li>
                        <li><a href="#"><i class="fa fa-bar-chart-o"></i>Statistics</a></li>
                        <li><a href="#"><i class="fa fa-pencil-square-o"></i>Customize</a></li>
                    </ul>
                </div>
                <a href="#" class="red-bg red-button "><i class="fa fa-bullhorn"></i><span> Shout</span></a>
                </div>
              </div>  
            </header>
            <!-- END ENTITY -->


            <!-- MAIN SECTION -->
            <section class="wrapper">
                <div class="main-top has-steps">
                    <h2 class="left">Create your Shout</h2>

                    <div class="right steps">
                        <span class="left"><i>Steps:</i></span>
                        <div class="left circle red"><i class="fa fa-check"></i></div>
                        <div class="left circle red"><i class="fa fa-check"></i></div>
                        <div class="left circle red-bg">3</div>
                    </div>
                </div>
                
                <div class="edition">
                    <div class="white-box">
                    <hgroup>
                        <h3>3. Preview and Shout</h3>
                    </hgroup>
                    <h5>Your shout:</h5>
                    <div class="preview row">
                        <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
                            <div class="shout">
                                <div class="shout-head"><a href="#"class="right"><i class="fa fa-pencil-square-o"></i></a><h3>Salvemos a los Osos Polares</h3></div>
                                <p>&ldquo;Yo tambi&eacute;n me sum&eacute; a esta nueva iniciativa de GreenPeace! No se la pierdan! <a href="">bit.ly/34509</a>&rdquo;</p>
                            </div>
                        </div>
                        <hr />
                        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                            <div class="social">
                                <i class="fa fa-twitter"></i>
                                <i class="fa fa-facebook-square"></i>
                                <a href=""><i class="fa fa-pencil-square-o right"></i></a>
                            </div>
                            <div class="stats">
                                <span class="red">40</span>
                                <p><b>Spreaders</b> will post this</p>
                            </div>
                            <div class="stats">
                                <span class="blue">5,000</span>
                                <p>Is your total <b>reach</b></p>
                            </div>
                        </div>
                    </div>
                    <div class="suggestions">
                        <p><b>Spread</b>Shout's values are Affinity, Collaboration and Trust. Based on this, we require our shouters to consider these three guidelines prior to submitting a Shout:</p>
                        <ul>
                            <li>The content must be <span>related to the purpose</span> your Spreaders support you for</li>
                            <li>You have considered the <span>feedback received</span></li>
                            <li>You are confident you're <span>not offending</span> anyone with this content</li>
                        </ul>
                        <p>By doing this, you will avoid losing Spreaders and is more likely for your message to be <strong>shared</strong>.</p>
                        <div class="checkbox ssg-confirm">
                            <label>
                                <input type="checkbox"> I have checked that my shout follows the suggested guidelines.
                            </label>
                        </div>
                    </div>
                    </div>
                    <nav>
                        <button class="left no-border previous"><i class="fa fa-long-arrow-left"></i><span>Compose your Shout</span></button>
                        <button class="right red-bg"><i class="fa fa-bullhorn"></i><span>Shout!</span></button>
                        <button class="right no-border draft"><i class='fa fa-file-text-o'></i><span>Draft</span></button>
                    </nav>
                </div>
            </section>
            <!-- END MAIN SECTION -->
        <div class="wrapper">
            <footer>
            <div class="footer-links left">
                <ul>
                    <li><a  href="#">FAQ</a></li>
                    <li><a  href="#">About us</a></li>
                    <li><a  href="#">Pricing</a></li>
                    <li><a  href="#">Blog</a></li>
                </ul>
            </div>
            <p class="language left">Language <a class="red" href="#">en</a>|<a class="red" href="#">es</a></p>           

            <div class="contact">
                <p>Got any questions? Feel free to <a class="red" href="mailto:hi@spreadshout.com">Contact Us</a>. &reg; 2014 SpreadShout. All rights reserved</p>
                
            </div>
        </footer>
        </div>
        </div>
        <div class="clearfix"></div>
        <!-- END WHITE BLOCK -->
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/back.js"></script>
        <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
        <script type="text/javascript">
            $('.dropdown-toggle').dropdown();

            $('.search input').focus(function() {
                $('.search .fa-search').hide();
                if ($(window).width() < 480) {
                    $('.search-overlay').show();
                    $('.search').css('position', 'static');
                    $('.close-for-small').fadeIn();
                }
            });
            $('.search input').focusout(function() {
                $('.search .fa-search').css('display', 'inline');
                $('.search-overlay').hide();
                $('.search').css('position', 'relative');
                $('.close-for-small').hide();
            });
            var sidebarState = 'closed';
            $('.open-sidebar').click(function() {
                if (sidebarState == 'closed') {
                    $('aside').addClass('open');
                    $('.main-content').addClass('push');
                    sidebarState = 'open';
                } else {
                    $('aside').removeClass('open');
                    $('.main-content').removeClass('push');
                    sidebarState = 'closed';
                }
            });
        </script>
        </script>
        <!-- //Tooltip -->
            <script>
        $(document).ready(function() {
            $('.has-tooltip').tooltipster();
        });
    </script>
    </body>
</html>